<template>
	<view class="district" v-if="pagedList.length > 0">
		<scroll-view scroll-x class="scroll-x" @scroll="scroll">
			<view class="list" v-for="(page, pageIndex) in pagedList" :key="pageIndex">
				<view class="li u-flex u-flex-col u-flex-center" v-for="(val, k) in page" :key="k"
					@click="categorySwitchTab(val)">
					<view class="li-base u-flex-center">
						<u-image :src="val.image || ''" width="108rpx" height="108rpx"
							:showMenuByLongpress="false"></u-image>
					</view>
					<view class="li-text">{{val.name}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="scroll" :style="{ width: scrollWidth }">
			<view class="scroll-active" :style="{ transform: `translateX(${activeDotOffset}px)` }"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				pagedList: [],
				activeDotOffset: 0,
			};
		},
		watch: {
			productCategoryList: {
				handler(newVal) {
					this.splitList(newVal);
				},
				immediate: true
			}
		},
		computed: {
			scrollWidth() {
				return `${this.pagedList.length * 19}px`;
			},
			...mapState({
				productCategoryList: (state) => state.index.productCategoryList
			})
		},
		methods: {
			splitList(list) {
				const itemsPerPage = 10;
				let result = [];
				for (let i = 0; i < list.length; i += itemsPerPage) {
					result.push(list.slice(i, i + itemsPerPage));
				}
				this.pagedList = result;
			},
			// 滚动，设置滚动条偏移位置
			scroll(e) {
				// 获取当前滚动视图的滚动距离
				this.scrollLeft = e.detail.scrollLeft;
				// 计算所有列表项的总宽度
				const itemWidth = 375 * this.pagedList.length;
				// 获取滚动条轨道的总宽度（去掉单位 px）
				const scrollWidth = parseInt(this.scrollWidth, 10);
				// 计算滚动条指示条的最大偏移量
				const maxOffset = scrollWidth - 19;
				// 计算滚动比例，即当前滚动距离在可滚动总宽度中的占比
				let scrollRatio = 0;
				if (itemWidth > 375) {
					// 避免除零错误
					scrollRatio = this.scrollLeft / (itemWidth - 375);
				}
				// 根据滚动比例计算滚动条指示条的偏移量
				let activeDotOffset = scrollRatio * maxOffset;
				// 边界处理，确保偏移量不超出范围
				activeDotOffset = Math.min(activeDotOffset, maxOffset);
				activeDotOffset = Math.max(activeDotOffset, 0);
				// 更新滚动条指示条的偏移量
				this.activeDotOffset = activeDotOffset;
			},
			categorySwitchTab(e) {
				if (e.mod_type == 2) {
					this.$navigateTo('/apparatusSubPackages/index/index?tabbarIndex=1&id=' + e.id);
				} else {
					this.$switchTab('/pages/category/index')
					this.$store.commit("init/setCategory", e.id)
				}
			}
		}
	};
</script>

<style lang="scss">
	.district {
		.scroll-x {
			white-space: nowrap; // 防止内容换行
		}

		.list {
			display: inline-flex;
			flex-wrap: wrap;
			min-width: 100%;

			.li {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				width: 20%; // 每行五个，所以每个占 20%宽度
				margin-top: 38rpx;

				.li-text {
					padding-top: 12rpx;
					font-size: 24rpx;
					color: #202020;
				}
			}
		}

		.scroll {
			height: 4rpx;
			background-color: #EEEEEE;
			border-radius: 2rpx;
			margin: 30rpx auto 6rpx;

			.scroll-active {
				width: 19px;
				height: 4rpx;
				background: #888888;
				border-radius: 2rpx;
				transition: transform 0.1s;
			}
		}
	}
</style>